<template>
  <div class="app-container">
    <el-row style="height: 50px;line-height: 50px;">
      <el-col :span="8">
        <el-row>
          <el-col style="width:70px;margin-right:20px">{{ $t('staff.staffAccount') }}</el-col>
          <el-col :span="15"><el-input v-model="account" :placeholder="$t('staff.placeholderStaffAccount')" /></el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col style="width:90px;margin-right:20px">{{ $t('staff.phoneMail') }}</el-col>
          <el-col :span="15"><el-input v-model="phone" :placeholder="$t('staff.phoneMail')" /></el-col>
        </el-row>
      </el-col>
      <el-col :span="4"><el-button type="primary" plain @click="handleSearchBtn">{{ $t('staff.searchBtn') }}</el-button></el-col>
    </el-row>
    <el-row style="margin-top:30px">
      <el-button type="primary" plain @click="handleCreateStaffBtn">{{ $t('staff.createStaff') }}</el-button>
    </el-row>
    <tab-pane style="margin-top: 30px" :list-query="listQuery" :table-label="tableLabel" :table-data="tableData" @editorThing="handleEditor" />
    <el-dialog
      :title="$t('staff.createStaff')"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form ref="form" :model="addStaffBody" :rules="staffForm" label-width="80px">
        <el-form-item :label="$t('staff.account')" prop="account">
          <el-input v-model="addStaffBody.account" :placeholder="$t('staff.placeholderAccount')" />
        </el-form-item>
        <el-form-item :label="$t('staff.userName')" prop="userName">
          <el-input v-model="addStaffBody.userName" :placeholder="$t('staff.placeholderUserName')" />
        </el-form-item>
        <el-form-item v-if="editorShow" class="passwordDom" :label="$t('staff.password')" prop="password">
          <el-input
            v-model="addStaffBody.password"
            :type="passwordType"
          />
          <span v-if="addStaffBody.password.length > 0" class="show-pwd" @click="showPwd('passwordType')">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
          <span style="font-size: 12px;color:gray">{{ $t('staff.placeholderPassWord') }}</span>
        </el-form-item>
        <el-form-item :label="$t('staff.role')">
          <!-- <el-input v-model="addStaffBody.roles" :placeholder="$t('staff.placeholderRole')" /> -->
          <el-select v-model="rolesChoosed" multiple :placeholder="$t('staff.placeholderRole')" clearable style="width: 100%">
            <el-option
              v-for="item in rolesList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{ $t('staff.create') }}</el-button>
          <el-button @click="dialogVisible = false">{{ $t('staff.cancle') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import TabPane from '@/views/tab/components/TabPane'
import { getUserList, addUser, editorUserData } from '@/api/staff'
import { getRolesList, userRole } from '@/api/role'
export default {
  name: 'Staff',
  components: {
    TabPane
  },
  data() {
    var self = this
    return {
      tableLabel: [
        {
          label: self.$t('staff.staffAccount'),
          key: 'staffAccount'
        },
        {
          label: self.$t('staff.userName'),
          key: 'userName'
        },
        {
          label: self.$t('staff.phone'),
          key: 'phone'
        },
        {
          label: self.$t('staff.mail'),
          key: 'mail'
        },
        {
          label: self.$t('staff.staffStatus'),
          key: 'staffStatus'
        },
        {
          label: self.$t('staff.createTime'),
          key: 'createTime'
        },
        {
          label: self.$t('staff.opratation'),
          key: 'opration',
          type: 'staffOpration'
        }
      ],
      tableData: [],
      dialogVisible: false,
      addStaffBody: {
        account: '',
        userName: '',
        password: ''
      },
      staffForm: {
        account: [
          { required: true, min: 6, max: 32, message: this.$t('staff.accountErrorTip'), trigger: 'blur' }
        ],
        userName: [
          { required: true, message: this.$t('staff.userNameErrorTip'), trigger: 'blur' }
        ],
        password: [
          { required: true, min: 8, max: 20, message: this.$t('staff.passWordErrorTip'), trigger: 'blur' }
        ]
      },
      passwordType: 'password',
      rolesList: [],
      rolesChoosed: [1, 2],
      listQuery: {
        limit: 20,
        page: 1,
        total: 0
      },
      account: '',
      phone: '',
      editorShow: true
    }
  },
  mounted() {
    this.getUserListData()
    this.getRolesListData()
  },
  methods: {
    // 获取角色列表
    getRolesListData() {
      var self = this
      var obj = {
        pageNo: 0,
        pageSize: 200
      }
      getRolesList(obj).then(res => {
        console.log('角色===》', res)
        self.rolesList = res.data.contents
      }).catch(error => {
        console.log(error)
      })
    },
    handleSearchBtn() {
      this.getUserListData()
    },
    // user list
    getUserListData() {
      var self = this
      var obj = {
        username: this.account,
        phone: this.phone,
        email: '',
        pageSize: this.listQuery.limit,
        pageNo: this.listQuery.page - 1
      }
      getUserList(obj).then(res => {
        self.tableDataFiles(res.data.contents)
        self.listQuery.total = res.data.total
        self.dialogVisible = false
      }).catch(error => {
        self.dialogVisible = false
        console.log(error)
      })
    },
    tableDataFiles(data) {
      var arr = []
      data.forEach(element => {
        var obj = {
          id: element.id,
          staffAccount: element.username,
          userName: element.firstName,
          phone: element.phone,
          status: element.enable,
          mail: element.email,
          staffStatus: element.enable ? this.$t('tab.open') : this.$t('tab.disabled'),
          createTime: element.createTime
        }
        arr.push(obj)
      })
      this.tableData = arr
    },
    // user editor
    handleEditor(data) {
      var self = this
      this.editorShow = false
      this.dialogVisible = true
      // var detail = false
      // var role = false
      editorUserData(data.id).then(res => {
        self.addStaffBody.account = res.data.username
        self.addStaffBody.userName = res.data.firstName
      })
      userRole(data.id).then(res => {
        console.log('啵啵啵啵啵啵', res)
        self.rolesList = res.data
      })
    },
    // add submit
    onSubmit() {
      var self = this
      this.editorShow = true
      var obj = {
        username: this.addStaffBody.account,
        firstName: this.addStaffBody.userName,
        password: this.addStaffBody.password,
        roles: this.rolesChoosed
      }

      addUser(obj).then(res => {
        console.log('新增用户低低调调', res)
        self.getUserListData()
      }).catch(error => {
        console.log(error)
      })
    },
    handleCreateStaffBtn() {
      this.dialogVisible = true
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    }
  }
}
</script>

<style  lang="scss" scoped>
$dark_gray:#889aa4;
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
    position: absolute;
    z-index: 9;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
.passwordDom .el-input {
  // width: 100%;
  display: inline-block;
  // text-indent: 4px;
}
</style>
